<template>
    <div>
        <div class="__form">
            <div class="inner">
                <h2>玩客同造</h2>
                <p>输入不存在的用户之后会自动进行注册</p>
                <br>
                <input class="input" type="text" v-model="username" alt="">
                <input class="input" type="password" v-model="password" alt="">
                <h2 class="login-btn" @click="login">{{ret}}</h2>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "login",
        data() {
            return {
                password: "",
                username: "",
                ret: "登录"
            }
        },
        methods: {
            reg() {
                this.$confirm('未知用户名称: ' + this.username + ",是否继续注册?", '提示', {
                    confirmButtonText: '是的',
                    cancelButtonText: '算了',
                    type: 'warning'
                }).then(() => {
                    this.$axios.post(
                        "/reg",
                        {
                            username: this.username,
                            password: this.password
                        }
                    ).then(
                        (response) => {
                            let data = response.data;
                            if (data == "okay") {
                                this.$notify.success({
                                    message: "注册成功 欢迎回来",
                                    title: "欢迎!"
                                })
                                this.login();
                            } else {
                                this.$notify.error({
                                    message: "发生错误~",
                                    title: "错误!"
                                })
                            }
                        }
                    )
                }).catch(() => {
                    this.$notify({
                        type: 'info',
                        message: '注册取消'
                    });
                });
            },
            login() {
                if (this.password.length >= 5 && this.username.length >= 5
                    && this.password.length <= 20 && this.password.length <= 20) {
                    this.$axios.post(
                        "/login",
                        {
                            username: this.username,
                            password: this.password
                        }
                    ).then(
                        (response) => {
                            let resdata = response.data.data;
                            let userdatas = response.data.user;

                            if (resdata.type == "reg") {
                                this.reg();
                            } else if (resdata.type == "login") {
                                localStorage["token"] = resdata.token;
                                localStorage['username'] = this.username
                                localStorage['userdata'] = resdata
                                if (resdata.ret) {
                                    this.$notify.success({
                                        message: "登陆成功 欢迎回来",
                                        title: "欢迎!"
                                    })

                                    // region 序列化到vuex
                                    let userdata = {
                                        username: this.username,
                                        init: userdatas.userinit,
                                    }
                                    this.$store.commit("suserstatus", userdata);
                                    this.$parent.update_userinfo({
                                        username: this.username,
                                        token: resdata.token
                                    })
                                    // endregion


                                    this.$router.push("/")

                                } else {
                                    this.$notify.error({
                                        message: "已有用户名然而密码不正确~",
                                        title: "错误!"
                                    })
                                }

                            }
                        }
                    )
                } else {
                    this.$notify.error({
                        message: "账号和密码长度需要在5 ~ 20之间",
                        title: "错误!"
                    })
                }

            }
        }
    }
</script>

<style scoped lang="less">
    .login-btn {
        text-align: center;
        user-select: none;
        transition: .45s;

        &:hover {
            color: greenyellow;
        }
    }

    .__form {
        background-color: #26A2C1;
        color: white;

        .inner {
            height: 100vh;
            display: grid;
            place-content: center;
        }

    }

    .input {
        margin-bottom: 20px;
        height: 30px;
        box-sizing: border-box;
        transition: .5s;
        width: 350px;

        &:focus {
            border: #F19B05 2px solid;
            outline: none
        }
    }
</style>